<template>
    <div>
        <div
            v-show="ruleType === 'choose'"
            class="table-page"
        >
            <div class="table-operation-box">
                <el-button
                    type="primary"
                    plain
                    style="margin-bottom: 2em"
                    @click="clickAdd('添加试卷关联', getList)"
                >选择试卷
                </el-button>
            </div>
            <div class="table-data-box">
                <el-table
                    ref="table"
                    v-loading="paperLoading"
                    :data="resourceData"
                    border
                    style="width: 100%;min-height:40em"
                    row-key="id"
                >
                    <!--                    <el-table-column prop="data.schoolName" label="学校" width="160"></el-table-column>-->
                    <el-table-column
                        prop="data.name"
                        label="试卷名称"
                        width="200"
                    ></el-table-column>
                    <!--                    <el-table-column prop="data.paperType" label="试卷分类" width="120">-->
                    <!--                        <template slot-scope="scope">-->
                    <!--                            {{ status[scope.row.paperType] }}-->
                    <!--                        </template>-->
                    <!--                    </el-table-column>-->
                    <el-table-column
                        prop="data.remark"
                        label="试卷描述"
                        width="200"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        prop="data.totalScore"
                        label="试卷总分"
                        width="120"
                    ></el-table-column>
                    <el-table-column
                        prop="data.passScore"
                        label="及格分数"
                        width="120"
                    ></el-table-column>
                    <el-table-column
                        prop="createdBy"
                        label="创建人"
                        width="160"
                    ></el-table-column>
                    <el-table-column
                        prop="createdTime"
                        label="创建时间"
                        width="160"
                    ></el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        min-width="160"
                    >
                        <template slot-scope="scope">
                            <!--                            <el-button-->
                            <!--                                type="warning"-->
                            <!--                                icon="el-icon-delete"-->
                            <!--                                size="mini"-->
                            <!--                                :loading="scope.row.opLoading"-->
                            <!--                                @click="-->
                            <!--                                tableDelete(-->
                            <!--                                    '/exam/exam/re/delete',-->
                            <!--                                    {-->
                            <!--                                        id: scope.row.id-->
                            <!--                                    },-->
                            <!--                                    true,-->
                            <!--                                    search-->
                            <!--                                )-->
                            <!--                            "-->
                            <!--                            >删除关联-->
                            <!--                            </el-button-->
                            <!--                            >-->
                            <el-button
                                type="primary"
                                size="mini"
                                :loading="scope.row.opLoading"
                                @click="toPaperQuestion(scope.row)"
                            >查看试卷
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <el-dialog
                title="选择试卷"
                :visible.sync="selfPaperDialogFormVisible"
                width="80%"
                style="left: 100px"
            >
                <paper-component
                    ref="paperComponent"
                    :is-show="isShow"
                    :init-param="dataInfo"
                    v-if="selfPaperDialogFormVisible"
                    :from-exam="true"
                    @paperSelectEvent="getSelectPaper"
                ></paper-component>
            </el-dialog>
            <el-dialog
                title="选择试卷"
                :visible.sync="groupPaperDialogFormVisible"
                width="80%"
                style="left: 100px"
            >
                <group-paper-component
                    ref="GroupPaperComponent"
                    :is-show="isShow"
                    :init-param="dataInfo"
                    :from-exam="true"
                    v-if="groupPaperDialogFormVisible"
                    @paperSelectEvent="getSelectPaper"
                ></group-paper-component>
            </el-dialog>
        </div>
        <div
            v-show="ruleType !== 'choose'"
            class="table-page"
        >
            <div class="table-operation-box">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    style="margin-bottom: 2em"
                    @click="clickAdd('添加规则关联', getList)"
                >添加规则关联
                </el-button>
            </div>
            <div class="table-data-box">
                <el-table
                    ref="table"
                    v-loading="paperLoading"
                    :data="resourceData"
                    border
                    style="width: 100%;min-height:40em"
                    row-key="id"
                >
                    <el-table-column
                        prop="data.name"
                        label="组卷名称"
                        width="200"
                    ></el-table-column>
                    <el-table-column
                        prop="data.remark"
                        label="组卷描述"
                        width="200"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        prop="data.totalScore"
                        label="组卷总分"
                        width="120"
                    ></el-table-column>
                    <el-table-column
                        prop="data.passScore"
                        label="及格分数"
                        width="120"
                    ></el-table-column>
                    <el-table-column
                        prop="createdBy"
                        label="创建人"
                        width="200"
                    ></el-table-column>
                    <el-table-column
                        prop="createdTime"
                        label="创建时间"
                        width="200"
                    ></el-table-column>
                    <!--                    <el-table-column label="操作" align="center" min-width="200">-->
                    <!--                        <template slot-scope="scope">-->
                    <!--                            <el-button-->
                    <!--                                type="primary"-->
                    <!--                                size="mini"-->
                    <!--                                :loading="scope.row.opLoading"-->
                    <!--                                @click="toEditPg(scope.row.data)"-->
                    <!--                            >编辑规则-->
                    <!--                            </el-button>-->
                    <!--                        </template>-->
                    <!--                    </el-table-column>-->
                </el-table>
            </div>

            <el-dialog
                title="选择组卷规则"
                :visible.sync="selfRuleDialogFormVisible"
                width="80%"
                style="left: 100px"
            >
                <paper-rule-component
                    ref="paperRuleComponent"
                    :is-show="isShow"
                    :init-param="dataInfo"
                    :from-exam="true"
                    @ruleSelectEvent="getSelectRule"
                ></paper-rule-component>
            </el-dialog>
            <el-dialog
                title="选择组卷规则"
                :visible.sync="groupRuleDialogFormVisible"
                width="80%"
                style="left: 100px"
            >
                <group-paper-rule-component
                    ref="groupPaperRuleComponent"
                    :is-show="isShow"
                    :init-param="dataInfo"
                    :from-exam="true"
                    @ruleSelectEvent="getSelectRule"
                ></group-paper-rule-component>
            </el-dialog>
        </div>
        <el-dialog
            v-if="paperQuestionVisible"
            title="查看试卷"
            :visible.sync="paperQuestionVisible"
            width="80%"
        >
            <paperQuestionComponent :data-form="paperData"></paperQuestionComponent>
            <span
                slot="footer"
                class="dialog-footer"
            >
        <el-button @click="paperQuestionVisible = false">关 闭</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";

import {
    fetchResourceListByExamId,
    insertExamPaperRe,
    updateExam
} from "@/api/exam.js";
import paperRuleComponent from "@/views/models/exam/component/paperRuleComponent";
import paperComponent from "@/views/models/exam/component/paperComponent";
import groupPaperComponent from "@/views/models/exam/component/groupPaperComponent";
import groupPaperRuleComponent from "@/views/models/exam/component/groupPaperRuleComponent";
import paperQuestionComponent from "@/views/models/exam/component/paperQuestionComponent";

export default {
    name: "ExamPaperRe",
    components: {
        paperRuleComponent,
        paperComponent,
        groupPaperComponent,
        groupPaperRuleComponent,
        paperQuestionComponent
    },
    mixins: [TablePage],
    data() {
        return {
            classificationId: null,
            queryData: {
                paperType: "",
                name: "",
                ruleName: ""
            },
            paperData: {},
            examId: "",
            ruleType: "",
            paperQuestionVisible: false,
            paperType: "",
            school: null,
            groupPaperDialogFormVisible: false,
            selfPaperDialogFormVisible: false,
            groupRuleDialogFormVisible: false,
            selfRuleDialogFormVisible: false,
            dataInfo: {},
            initAddForm: {
                id: null,
                name: null,
                remark: null,
                actionCodes: []
            },
            isShow: false,
            actions: null,
            actionSearch: null,
            src:
                "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
            resourceData: [],
            paperRe: {},
            paperLoading: false,
            radio: null,
            currentSelectItem: {}
        };
    },
    computed: {
        ...mapState({
            status: state => state.status.paperType
        })
    },
    watch: {
        actionSearch(val) {
            this.$refs.tree.filter(val);
        },
        $route: function (to, from) {
            // 拿到目标参数 to.query.id 去再次请求数据接口
            if (this.$route.params.data) {
                this.search();
            }
            // if (from.name === "AddPaper") {
            //     this.$refs.paperComponent.search();
            // }
            // if (from.name === "AddRule") {
            //     this.$refs.paperRuleComponent.search();
            // }
        }
    },
    mounted() {
    },
    methods: {
        search: function () {
            this.ruleType = this.$route.query.ruleType;
            this.paperType = this.$route.query.paperType;
            this.examId = this.$route.query.examId;
            this.schoolCode = this.$route.query.schoolCode;
            this.school = this.$route.query.school;

            this.dataInfo.paperType = this.paperType;
            this.dataInfo.schoolCode = this.schoolCode;
            this.dataInfo.classificationId = this.$route.query.classificationId;
            this.paperLoading = true;
            fetchResourceListByExamId({examId: this.examId})
                .then(res => {
                    this.resourceData = res;
                })
                .finally(() => {
                    this.paperLoading = false;
                });
        },
        toPaperQuestion(data) {
            this.paperData = data.data;
            this.paperQuestionVisible = true;
        },
        getList() {
            if (this.ruleType === "choose") {
                //this.getPaperList();
                if ("other" === this.school) {
                    this.groupPaperDialogFormVisible = true;
                } else {
                    this.selfPaperDialogFormVisible = true;
                }
            } else {
                this.dataInfo.ruleType = this.ruleType;
                //this.getRuleList();
                if ("other" === this.school) {
                    this.groupRuleDialogFormVisible = true;
                } else {
                    this.selfRuleDialogFormVisible = true;
                }
            }
        },
        getPaperList: function () {
            this.loadTable("/exam/paper/page", this.queryData);
        },
        getRuleList: function () {
            this.loadTable("/exam/rule/page", this.queryData);
        },

        getSelectRule(data) {
            this.currentSelectItem = data;
            this.addExamPaperRe();
        },
        getSelectPaper(data) {
            this.currentSelectItem = data;
            this.addExamPaperRe();
        },

        addExamPaperRe() {
            if (this.currentSelectItem.id) {
                let examPaperReParams = {
                    resourceId: this.currentSelectItem.id,
                    examId: this.examId,
                    ruleType: this.ruleType,
                    paperType: this.paperType
                };
                insertExamPaperRe(examPaperReParams, "考试-试卷关联异常").then(
                    res => {
                        if (res) {
                            this.selfPaperDialogFormVisible = false;
                            this.selfRuleDialogFormVisible = false;
                            this.groupRuleDialogFormVisible = false;
                            this.groupPaperDialogFormVisible = false;
                            this.search();
                        }
                    }
                );
            } else {
                this.$message({
                    type: "info",
                    message: `请选择试卷`
                });
            }
        },
        toEditPg(data) {
            if (this.ruleType === "choose") {
                this.$router.push({
                    name: "AddPaper",
                    params: {
                        paperType: this.paperType,
                        dataForm: data,
                        addAction: false,
                        fromExam: true
                    }
                });
            } else {
                this.$router.push({
                    name: "AddRule",
                    params: {
                        paperType: this.paperType,
                        dataForm: data,
                        addAction: false,
                        fromExam: true
                    }
                });
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
    background: #fff;
    border-radius: 0.3em 0.3em 0 0;
    padding-bottom: 1em;
    padding-top: 1em;
    padding-left: 1em;
    margin-top: 16px;

    .container-content {
        padding-top: 12px;

        p {
            color: #909399;
            font-size: 15px;
            padding-top: 12px;
        }
    }

    .container-right {
        margin-left: 12px;
        margin-top: 2em;

        .r-img {
            max-width: 240px;
            max-height: 160px;
        }

        .r-btn {
            margin-top: 22px;
        }
    }
}

.table-search-box {
    padding-left: 17px;
    font-size: 16px;
}
</style>
